const echartsrender = {
    map: function (args) { //标准地图
        var defaultargs = { //地图默认配置
            mapType: 'china',
            geo_itemStyle: { //地图区域和边框颜色
                normal: {
                    areaColor: '#114181',
                    borderColor: '#3c9dff',
                    borderWidth: 2
                },
                emphasis: {
                    areaColor: '#F7B61C'
                }
            },
            itemStyle: { //地图区域和边框颜色
                normal: {
                    areaColor: '#114181',
                    borderColor: '#3c9dff',
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: '#F7B61C'
                }
            },
            visualMap_color: ['#0b1a48', '#3472cc'], //地图渐变颜色
            serieslabel: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
        }
        this.mapType = args.mapType ? args.mapType : defaultargs.mapType; //地图类型
        this.data = args.data ? args.data : []; //地图数据
        this.geo_itemStyle = args.geo_itemStyle ? args.geo_itemStyle : defaultargs.geo_itemStyle;
        this.itemStyle = args.itemStyle ? args.itemStyle : defaultargs.itemStyle; //地图区域和边框颜色
        this.legend_data = args.legend_data || []; //图例组件数据
        this.visualMap_color = args.visualMap_color || defaultargs.visualMap_color; //地图渐变颜色
        this.visualMap_type = args.visualMap_type || "piecewise";
        this.visualMap_max = args.visualMap_max || 100; //地图渐变颜色最大值设置
        this.visualMap_min = args.visualMap_min || 0; //地图渐变颜色最大值设置
        this.series_name = args.series_name || '';
        this.title = args.title || '';
        this.serieslabel = args.serieslabel ? args.serieslabel : defaultargs.serieslabel; //图形上的文本标签
        var option = {
            tooltip: {
                trigger: 'item'
            },
            title: {
                text: this.title,
                left: 'center',
                top: '5%',
                textStyle: {
                    align: 'center',
                    color: "#61afef",
                    fontSize: 16
                }
            },
            legend: {
                bottom: '10%',
                // orient: 'vertical',
                left: 'left',
                data: this.legend_data
            },
            geo: args.geo || {},
            formatter: args.formatter || {},
            visualMap: {
                type: this.visualMap_type,
                min: this.visualMap_min,
                max: this.visualMap_max,
                bottom: '10%',
                left: 20,
                precision: 2,
                // text: ['高', '低'],
                color: this.visualMap_color,
                // orient: 'horizontal',
                calculable: true,
                textStyle: {
                    show: false,
                    color: 'rgba(255,255,255,0.7)'
                }
            },
            toolbox: {
                show: false,
            },
            series: [{
                name: this.series_name,
                type: 'map',
                mapType: this.mapType,
                roam: false,
                showLegendSymbol: false, //不显示小点
                itemStyle: this.itemStyle,
                nameMap: args.seriesnameMap || {},
                label: this.serieslabel,
                data: this.data
            }]
        }
        return option;
    },
    portbar: function (args) { //纵向柱状图
        this.title = args.title || '';
        this.legend_data = args.legend_data || []; //图例组件数据
        this.xAxis_data = args.xAxis_data || []; //x 轴数据
        this.series = args.series || []; //系列列表
        this.fontColor = args.fontColor || '#b4b9be';
        var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            tooltip: {
                trigger: "axis",
                padding: [8, 10],
                backgroundColor: 'rgba(0,0,0,0)',
                axisPointer: {
                    type: "shadow",
                    textStyle: {
                        color: "#fff"
                    }
                }
            },
            title: {
                text: this.title,
                left: '2%',
                top: '0',
                textStyle: {
                    /*                align: 'center',
                                    color: '#4DCEF8',
                                    fontSize: 15*/
                    align: 'center',
                    color: this.fontColor,
                    fontFamily: 'Microsoft YaHei',
                    fontSize: 15
                }
            },
            legend: {
                data: this.legend_data,
                bottom: '0%',
                x: 'center',
                right: 'center',
                textStyle: {
                    color: this.fontColor, //5cbef5
                    // fontSize: 14
                },
                // itemWidth: 18,
                itemHeight: 6,
                // itemGap: 35,
                borderRadius: 5
            },
            grid: {
                left: '6%',
                top: '15%',
                bottom: '20%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                offset: 10,
                data: this.xAxis_data,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#4EB5D6',
                        type: 'solid',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                //  改变x轴字体颜色和大小
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: this.fontColor //'#5cbef5'//'rgba(255,255,255,0.7)'
                    },
                    interval: 'auto',
                    // formatter: '{value} '
                }
            }],
            yAxis: [{
                type: 'value',
                splitNumber: 3,
                //  改变x轴字体颜色和大小
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,0.7)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#39517D'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#4EB5D6',
                        type: 'solid',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                }
            }],
            series: this.series
        };
        return option;
    },
    hxbar: function (args) { //横向堆叠柱状图
        this.legend_data = args.legend_data || []; //图例组件数据
        this.yAxis_data = args.yAxis_data || []; //y 轴数据
        this.series = args.series || []; //系列列表
        this.title = args.title || '';
        var option = {
            title: {
                text: this.title,
                left: '3%',
                top: '0',
                textStyle: {
                    align: 'center',
                    color: '#5cbef5',
                    fontSize: 15
                }
            },
            legend: {
                data: this.legend_data,
                bottom: '0',
                textStyle: {
                    color: "#CDD0D0",
                },
                left: '7%',
                itemWidth: 18,
                itemHeight: 6,
                itemGap: 25
            },
            grid: {
                containLabel: true,
                top: '12%',
                left: '0%',
                right: '5%',
                bottom: '10%',
                borderColor: '#296C89',
                borderWidth: 1,
            },
            tooltip: {
                show: true,
                backgroundColor: '#fff',
                borderColor: '#ddd',
                borderWidth: 1,
                textStyle: {
                    color: '#3c3c3c',
                    fontSize: 16
                },
                // formatter: function(p) {
                // console.log(p)
                // var _arr = p.seriesName.split('/'),
                // idx = p.seriesIndex;//1，2，3
                // return '名称：' + p.seriesName + '<br>' + '完成：' + p.value + '<br>' + '占比：' + (p.value / _max * 100).toFixed(0) + '%';
                // },
                extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
            },
            xAxis: {
                splitNumber: 10,
                // interval: _max / spNum,
                max: 100,
                boundaryGap: false, //取消两端间隙
                axisLine: { //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#0ec1ff'
                    },
                },
                splitLine: {
                    show: false,
                },
                axisLabel: { //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: 'rgba(255,255,255,0.7)',
                        margin: 15,
                    },
                    formatter: function (v) {
                        var _v = (v / 100 * 100).toFixed(0);
                        return _v == 0 ? _v : _v + '%';
                    }
                },
                axisTick: {
                    show: false,
                }
            },
            yAxis: [{
                data: this.yAxis_data,
                boundaryGap: true, //取消两端间隙
                position: 'left',
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    onZero: false,
                    lineStyle: {
                        color: '#0ec1ff'
                    },
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: 'rgba(255,255,255,0.7)',

                    },
                },
                axisTick: {
                    show: false,
                }
            }, {
                data: this.yAxis_data,
                boundaryGap: true, //取消两端间隙
                position: 'right',
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    onZero: false,
                    lineStyle: {
                        color: '#0ec1ff'
                    },
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false,
                }
            }, {
                show: false,
                data: this.y_data,
                axisLine: {
                    show: false
                }
            }],
            series: this.series
        };

        return option;
    },

    line: function (args) { //折线图
        this.title = args.title || ''; //标题
        this.xAxisdata = args.xAxisdata ? args.xAxisdata : []; //x 轴数据
        this.unit = args.unit ? args.unit : '';
        this.series = args.series ? args.series : []; //系列列表
        this.color = args.color ? args.color : [];
        this.mindata = args.mindata ? args.mindata : 0;
        this.maxdata = args.maxdata ? args.maxdata : 'dataMax';
        this.legenddata = args.legenddata ? args.legenddata : []; //图例组件数据
        this.legendselected = args.legendselected ? args.legendselected : {};
        var option = {
            title: {
                text: this.title,
                top: '0',
                left: 'center',
                textStyle: {
                    align: 'center',
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 14
                }
            },
            legend: {
                show: true,
                type: 'plain',
                left: 'center',
                bottom: '2%',
                textStyle: {
                    color: "#CDD0D0",
                },
                itemHeight: 6,
                selected: this.legendselected,
                data: this.legenddata
            },
            grid: {
                show: true,
                top: '13%',
                left: '4%',
                right: '4%',
                bottom: '15%',
                containLabel: true,
                borderColor: '#296C89',
                borderWidth: 1,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    label: {
                        show: true,
                        backgroundColor: '#333'
                    }
                }
            },
            xAxis: {
                type: 'category',
                data: this.xAxisdata,
                boundaryGap: false, //取消两端间隙
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#4EB5D6',
                        type: 'solid',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                //  改变x轴字体颜色和大小
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#CDD0D0' //'rgba(255,255,255,0.7)'
                    },
                    interval: 'auto',
                    // formatter: '{value} '
                }
            },
            yAxis: {
                type: 'value',
                name: this.unit,
                nameTextStyle: {
                    color: '#bacbe7'
                },
                splitNumber: 3,
                axisLine: {
                    show: false
                },
                min: this.mindata,
                max: this.maxdata,
                //  改变x轴字体颜色和大小
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,0.7)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#39517D'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#4EB5D6',
                        type: 'solid',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                }
            },
            color: this.color,
            series: this.series
        };
        return option;
    },

    lineTwo: function (args) { //两端无间隙的折线图
        this.title = args.title || ''; //标题
        this.xAxisdata = args.xAxisdata ? args.xAxisdata : []; //x 轴数据
        this.unit = args.unit ? args.unit : '';
        this.series = args.series ? args.series : []; //系列列表
        this.color = args.color ? args.color : [];
        this.mindata = args.mindata ? args.mindata : 0;
        this.maxdata = args.maxdata ? args.maxdata : 'dataMax';
        this.legenddata = args.legenddata ? args.legenddata : []; //图例组件数据
        this.legendselected = args.legendselected ? args.legendselected : {};
        var option = {
            title: {
                text: this.title,
                top: '0',
                left: 'center',
                textStyle: {
                    align: 'center',
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 14
                }
            },
            legend: {
                show: true,
                type: 'plain',
                left: 'center',
                bottom: '2%',
                textStyle: {
                    color: "#CDD0D0",
                    fontSize: 14
                },
                itemHeight: 6,
                selected: this.legendselected,
                data: this.legenddata
            },
            grid: {
                show: true,
                top: '14%',
                left: '1%',
                right: '4%',
                bottom: '15%',
                containLabel: true,
                borderColor: '#296C89',
                borderWidth: 1,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    label: {
                        show: true,
                        backgroundColor: '#333'
                    }
                }
            },
            xAxis: {
                // type: 'category',
                data: this.xAxisdata,
                boundaryGap: true, //取消两端间隙
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#4EB5D6',
                        type: 'solid',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,0.7)'
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: this.unit,
                nameTextStyle: {
                    color: 'rgba(255,255,255,0.7)'
                },
                splitNumber: 3,
                axisLine: {
                    show: false
                },
                min: this.mindata,
                max: this.maxdata,
                //  改变x轴字体颜色和大小
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#cdd0d0' //'rgba(255,255,255,0.7)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#39517D'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#4EB5D6',
                        type: 'solid',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                }
            },
            color: this.color,
            series: this.series
        };
        return option;
    },


    lineandbar: function (args) { //折现混合柱状图
        this.xAxisdata = args.xAxisdata ? args.xAxisdata : []; //x 轴数据
        this.legenddata = args.legendata ? args.legendata : []; //图例组件数据
        this.mindata = args.mindata ? args.mindata : 0;
        this.maxdata = args.maxdata ? args.maxdata : 'dataMax';
        this.minlinedata = args.minlinedata ? args.minlinedata : 0;
        this.maxlinedata = args.maxlinedata ? args.maxlinedata : 'dataMax';
        this.series = args.series || []; //系列列表
        this.title = args.title || '';
        this.fontColor = args.fontColor || '#b4b9be';
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    label: {
                        show: true,
                        backgroundColor: '#333'
                    }
                },
                formatter: function (params) {
                    //移除重复的数据
                    for (var i = 0; i < params.length; i++) {
                        for (var j = params.length - 1; j > i; j--) {
                            if (params[j].data == params[i].data) {
                                params.splice(j, 1);
                                break;
                            }
                        }
                    }
                    var tip = '';
                    for (var i = 0; i < params.length; i++) { //这里是自己定义样式， params[i].marker 表示是否显示左边的那个小圆圈
                        if (params[i].value != 0) {
                            if (params[i].componentSubType == 'line') {
                                tip = tip + params[i].name + '<br>' + params[i].marker + params[i].seriesName.substring(0, 5) + ':' + params[i].value + '%<br/>';
                            } else {
                                tip = tip + params[i].marker + params[i].seriesName.substring(0, 5) + ':' + params[i].value + '<br/>';
                            }
                        }
                    }
                    return tip;
                }
            },
            title: {
                text: this.title,
                left: 15,
                top: '0',
                textStyle: {
                    align: 'center',
                    color: this.fontColor,
                    fontSize: 15
                }
            },
            grid: {
                top: '15%',
                left: '1%',
                right: '0',
                bottom: '8%',
                containLabel: true
            },
            legend: {
                bottom: 0,
                data: this.legenddata,
                textStyle: {
                    color: '#CDD0D0',
                },
                itemWidth: 18,
                itemHeight: 6,
                itemGap: 35
            },
            xAxis: [{
                //   type: 'category',
                boundaryGap: true, //显示两端间隙
                axisLine: { //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#0ec1ff'
                    },
                },
                axisLabel: { //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: 'rgba(255,255,255,0.7)',
                        margin: 15,
                    },
                },
                axisTick: {
                    show: false,
                },
                data: this.xAxisdata,
            }],
            yAxis: [{
                type: 'value',
                min: this.mindata,
                max: this.maxdata,
                splitNumber: 5,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#0a3256'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#0ec1ff'
                    },
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: 'rgba(255,255,255,0.7)',

                    },
                },
                axisTick: {
                    show: false,
                }
            }, {
                type: 'value',
                min: this.minlinedata,
                max: this.maxlinedata,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#0ec1ff'

                    },
                },
                axisLabel: {
                    color: 'rgba(0,0,0,0)'
                },
                axisTick: {
                    show: false,
                }
            }],
            series: this.series
        }
        return option;
    }
}

export default echartsrender;
